<template>
	<view class="background">

		<view class="content">
			<view class="head">
				添加附加价格
			</view>
			<view class="cont">
				<view class="itemDialog">
					<view class="text">
						价格：
					</view>
					<input type="number" v-model="price" class="inpt" />
				</view>
				<view class="itemDialog">
					<view class="text">
						备注：
					</view>
					<input type="text" v-model="remark" class="inpt" />
				</view>
			</view>

			<view class="footer">
				<button @click="cancel" class="FotBtnsss">取消</button>
				<button @click="notarize" class="FotBtnsss">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['flowId'],
		data() {
			return {
				remark: '',
				price: ''
			};
		},
		methods: {
			notarize() {
				uni.showLoading({
					title: '添加中'
				})
				setTimeout(() => {
					this.addInfo()
				}, 1000)
			},
			addInfo() {
				uni.showLoading({
					title: '添加中'
				})
				this.$api.add_priceApi({
					id: this.flowId,
					price: this.price,
					remark: this.remark
				}).then(res => {
					if (res.code == 1) {
						this.price = ''
						this.remark = ''
						uni.hideLoading()
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
						this.cancel('closeAdd')
					}
				});
			},
			cancel() {
				this.$emit('closeAdd')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		// 遮罩颜色
		background: rgba($color: #000000, $alpha: 0.5);

		.content {
			width: 250px;
			height: 170px;
			background-color: #fff;
			border-radius: 14px;
			padding: 15px 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 9999;
			transform: translate(-50%, -50%);

			.head {
				text-align: center;
				color: #000000;
				font-size: 18px;
				margin-bottom: 15px;
			}

			.cont {
				.itemDialog {
					display: flex;
					margin: 10px 0;

					.text {
						width: 50px;
					}

					.inpt {
						border: 1px solid #eee;
						margin-left: 8px;
					}
				}
			}

			.footer {
				margin-top: 20px;
				display: flex;

				.FotBtnsss {
					width: 80px;
					height: 30px;
					line-height: 30px;
					font-size: 16px;
				}
			}
		}
	}
</style>